<template>
  <!-- 主体区域 -->
  <section id="app" v-if="todoList.length > 0">
    <!-- 输入框 -->
    <header class="header">
      <h1>TodoList</h1>
      <input
        @keyup.enter="add"
        placeholder="请输入任务"
        v-model="content"
        class="new-todo"
      />
      <button class="add" @click="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <!-- 遍历渲染的标签 -->
        <li
          class="todo"
          v-for="(item, index) in todoList"
          :key="item.id"
          :class="{ checked: item.isChecked }"
        >
          <div class="view">
            <!-- 小选框 -->
            <input type="checkbox" class="check" v-model="item.isChecked" />
            <!-- 任务序号 -->
            <span class="index">{{ index + 1 }}.</span>
            <!-- 任务名称 -->
            <label>{{ item.name }}</label>
            <!-- 删除按钮 -->
            <button class="destroy" @click="del(item.id)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="todoList.length > 0">
      <!-- 全选 -->
      <label class="check-all">
        <!-- 双向绑定.计算属性 -->
        <input type="checkbox" v-model="isAll" />
        全选
      </label>
      <!-- 统计 -->
      <span class="todo-count">
        合 计: {{ todoList.length }} / 已选: {{ totalCount }}
      </span>
      <!-- 清空 -->
      <div class="btn">
        <button class="clear-completed" @click="clear">清空任务</button>
        <button class="clear-completed" @click="clearCheck()">清除已办</button>
      </div>
    </footer>
  </section>
  <!-- 任务完成展示空 -->
  <div class="empty" v-else>恭喜你的任务完成啦~</div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const defaultList = [
  {
    id: 1,
    isChecked: true,
    name: '吃火锅',
  },
  {
    id: 2,
    isChecked: false,
    name: '敲代码',
  },
  {
    id: 3,
    isChecked: false,
    name: '谈恋爱',
  },
];

// 定义数据
const content = ref(''); // 输入框的内容
const todoList = ref(JSON.parse(localStorage.getItem('list')) || defaultList); // 任务列表

// 计算属性
const isAll = computed({
  get() {
    // 全选框的计算属性，判断所有小选框是否都被选中
    return todoList.value.every(item => item.isChecked === true);
  },
  set(value) {
    // 全选框的设置属性，根据全选框的状态设置所有小选框的状态
    todoList.value.forEach(item => (item.isChecked = value));
  },
});

const totalCount = computed(() => {
  // 统计选中任务的个数
  return todoList.value.reduce((sum, item) => {
    if (item.isChecked) {
      return sum + 1;
    } else {
      return sum;
    }
  }, 0);
});

// 方法
const del = (id) => {
  // 删除任务的方法
  todoList.value = todoList.value.filter(item => item.id!== id);
};

const add = () => {
  // 添加任务的方法
  if (content.value.trim() === '') {
    alert('任务不能为空');
    return;
  }
  todoList.value.unshift({
    id: +new Date(),
    name: content.value,
  });
  content.value = '';
};

const clear = () => {
  // 清空所有任务的方法
  todoList.value = [];
};

const clearCheck = () => {
  // 清空已选任务的方法
  todoList.value = todoList.value.filter(item =>!item.isChecked);
};

// 监听数据变化
watch(todoList, (newValue) => {
  // 将变化后的任务列表存储到本地存储中
  localStorage.setItem('list', JSON.stringify(newValue));
}, { deep: true });
</script>

<style></style>